@import "@/common/styles/colors"

.analyse-area
  margin-top: 2rem
  display: flex
  padding: 2.5rem 2rem
  border: transparent 1px solid
  background-color: $dark-gray
  border-radius: 15px
  width: 100%
  transition: all 0.5s
  align-items: center
  justify-content: center
  margin-bottom: 2rem
  box-sizing: border-box
  user-select: none

.pulse
  border: $green 2px solid
  animation: pulse 2s infinite

@keyframes pulse
  0%
    box-shadow: 0 0 0 0 #14AB37FF
  70%
    box-shadow: 0 0 0 10px #CCA92C00
  100%
    box-shadow: 0 0 0 0 #CCA92C00

.inner-container
  margin-left: 2rem
  margin-right: 2rem
  transition: all 0.5s
  animation: fadeIn 0.5s

.container-header
  display: flex
  align-items: center

.tests-paused
  border: $orange 2px solid

.container-text
  margin: 0 0 0 25px
  color: $white
  font-weight: 700
  font-size: 24pt
  white-space: nowrap

.container-subtext
  color: $subtext
  font-size: 16pt
  margin-left: 10px
  font-weight: 500

.container-main
  text-align: center
  color: $subtext

  h2
    font-size: 28pt
    font-weight: 700
    margin: 1rem

@media (max-width: 1351px)
  .inner-container
    margin-left: 1rem
    margin-right: 1rem

@media (max-width: 1200px)
  .analyse-area
    flex-wrap: wrap
  .mobile-break
    width: 100%
  .analyse-area
    justify-content: space-evenly

@media (max-width: 730px)
  .analyse-area
    flex-direction: column

@media (max-width: 475px)
  .analyse-area
    padding-left: 1rem
    padding-bottom: 1rem
    padding-top: 1rem
  .inner-container
    margin: 0